<template>
  <div class="warehouse-container">
    <div class="filter-container">
      <el-input v-model="listQuery.mid_table_remark_003_like" placeholder="房源名称" clearable class="filter-item input-item"
        style="width: 200px;" @clear="handleFilter" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="ID" prop="id" align="center" width="80" :class-name="getSortClass('id')">
        <template slot-scope="{row}">
          <span>{{ row.id_public_middle_table }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预览图" align="center">
        <template slot-scope="{row}">
          <el-image :src="row.mid_table_remark_002"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="房源名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mid_table_remark_003 || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="房源类型" align="center">
        <template slot-scope="{row}">
          <span>{{ houseType[row.mid_table_remark_004] || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="使用面积" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mid_table_remark_006 ? `${row.mid_table_remark_006}m²` : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="使用面积" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mid_table_remark_008 ? `${row.mid_table_remark_008}元` : '-' }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-show="total > 0" background :page.sync="currentPage" @current-change="getPageList"
      :page-size="pageSize" :total="total">
    </el-pagination>

  </div>
</template>

<script>
import { getWarehouseList } from '@/api/warehouse'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'Warehouse',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      currentPage: 0,
      houseType: {
        1001: "整租",
        1002: "合租",
        1003: "公寓",
        1004: "商铺",
        1005: "新房",
        1006: "二手房"
      },
      listQuery: {
        invoke_method: 'public_load_middle_table_list',
        pre_db_para_middle_table_name: 'public_middle_table_lite_mod_interview_exam',
        type_middle_app: '14001',
        type_inner_app: '3003',
        is_online: '0',
        pre_db_para_begin_idx: '0',
        pre_db_para_length_4_list: '4',
        mid_table_remark_003_like: ''
      },
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /*
    * 获取页面数据
    * */
    getList() {
      this.listLoading = true
      getWarehouseList(this.listQuery).then(response => {
        this.list = response.page_content
        this.total = response.result_num
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    /*
    * 点击分页进行查询
    * */
    getPageList(val) {
      this.listQuery.pre_db_para_begin_idx = (val - 1) * this.listQuery.pre_db_para_length_4_list
      this.getList()
    },
    /*
    * 查询数据
    * */
    handleFilter() {
      this.listQuery.pre_db_para_begin_idx = 0
      this.getList()
    },
    getSortClass: function (key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    },
  },
  computed: {
    pageSize() {
      try {
        return Number(this.listQuery.pre_db_para_length_4_list)
      } catch (error) {
        return 10;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.warehouse-container {
  margin: 24px 24px 0;
  padding: 16px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 8px;

  .filter-container {
    .el-button {
      background-color: #ec4040;
      border-color: #ec4040;
    }
  }

  .el-table {
    .el-button {
      background-color: #fff;
      color: #ec4040;
      border: none;
      padding: 0;
      font-size: 14px;
    }
  }

  .page-content {
    min-height: 500px;
  }

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .input-item {
    margin-right: 24px;
  }
}
</style>
<style>
.el-input__inner {
  line-height: 1px !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ec4040;
}
</style>
